{{ $scratch := newScratch }}

{{ if site.Params.preloader.enable }}
  <div class="preloader">
    <!-- get image path -->
    {{ $preloaderPath:= site.Params.preloader.preloader }}
    {{ if $preloaderPath }}

      <!-- check image existence -->
      {{ if fileExists (add `assets/` $preloaderPath) }}
        {{ $preloader:= resources.Get $preloaderPath }}


        <!-- image extension -->
        {{ $preloader_ext := path.Ext $preloader }}
        <!-- image width -->
        {{ $preloader_width := $preloader.Width }}


        <!-- not gif -->
        {{ if ne $preloader_ext ".gif" }}
          <!-- webp image -->
          {{ $option_webp := add (add (string $preloader_width) "x") " webp" }}
          {{ $scratch.Set "preloader" ($preloader.Resize $option_webp).RelPermalink }}
          <!-- fallback image -->
          {{ $option := add (string $preloader_width) "x" }}
          {{ $scratch.Set "preloader_fallback" ($preloader.Resize $option).RelPermalink }}

          <!-- gif image -->
        {{ else }}
          {{ $scratch.Set "preloader" $preloader.RelPermalink }}
        {{ end }}


        <img
          class="img"
          loading="preload"
          decoding="async"
          src="{{ $scratch.Get `preloader` }}"
          aria-label="preloader"
          title="preloader"
          onerror="this.onerror=null;this.src='{{ $scratch.Get `preloader_fallback` }}'"
          alt="preloader" />
      {{ end }}
    {{ end }}
    <!-- /check image existence -->
  </div>

  <script>
    (function () {
      "use strict";
      window.addEventListener("load", function () {
        document.querySelector(".preloader").style.display = "none";
      });
    })();
  </script>
{{ end }}
